<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title></title>
	<script src="javascripts/mui.js"></script>
	<link href="stylesheets/mui.css" rel="stylesheet" type="text/css"/>
	<style type="text/css">
		#search{
			float: right;
			color: #000000;
			font-size: 30px;
		}
		#Headportrait{
			width: 50px;
			height: 50px;
			border: solid #AAAAAA 1px;
			border-radius: 50%;
		}
		.mui-bar{
			height: 53px;
		}
		#btn{
			width: 100%;
			color: #000000;
		}
		#active{
			width: 100%;
			background-color:rgb(0,188,255) ;
		}
	</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
	<a class="mui-action-back mui-icon mui-icon-left-nav mui-left" style="float: right"></a>
	<img src="images/1.jpg" id="Headportrait">
	<h1 class="mui-title">首页</h1>

</header>
	<div class="mui-content"style="margin-top: 10px;">
		<div class="mui-row">
			<div class="mui-col-sm-4 mui-col-xs-3">
				<button class="mui-btn mui-active " id="active">现在开始</button>
			</div>
			<div class="mui-col-sm-4 mui-col-xs-2">
				<button class="mui-btn" id="btn">跑步</button>
			</div>
			<div class="mui-col-sm-4 mui-col-xs-3">
				<button class="mui-btn" id="btn">智能硬件</button>
			</div>
			<div class="mui-col-sm-4 mui-col-xs-2">
				<button class="mui-btn" id="btn">行走</button>
			</div>
			<div class="mui-col-sm-4 mui-col-xs-2">
				<button class="mui-btn" id="btn">瑜伽</button>
			</div>
		</div>
	</div>
	<div class="mui-content" style="background: lightgrey;">
		<h5>&nbsp;&nbsp;10月20日 星期三</h5><br>
		<h3>&nbsp;&nbsp;美好的身材&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="mui-icon mui-icon-image"></span></h3>
		<h3>&nbsp;&nbsp;真相只有一个</h3><br>
	</div>
<div class="mui-content" style="background: white;">
	<h4>&nbsp;&nbsp;针对你的推荐训练<span class="mui-icon mui-icon-close"style="float: right;"></span></h4><br>
	<h5>&nbsp;&nbsp;选择一个感兴趣的...</h5><br>
</div>
<div class="mui-content mui-text-center" style="background: lightgrey;">
	<h3>404</h3><br>
	<h3><span class="mui-icon mui-icon-image"></span></h3><br>
	<h3>Fashion</h3><br>
</div>
<nav class="mui-bar mui-bar-tab">
	<div class="mui-row">
		<div class="mui-row mui-col-xs-3 mui-text-center"style="padding-top: 3%;">
			<a href="/nav" style="color: black;">
				<span class="mui-tab-label">首页</span>
			</a>
		</div>
		<div class="mui-row mui-col-xs-3 mui-text-center"style="padding-top: 3%;">
			<a href="/course"style="color: black;">
				<span class="mui-tab-label">课程</span>
			</a>
		</div>
		<div class="mui-row mui-col-xs-3 mui-text-center"style="padding-top: 3%;">
			<a href="/sport"style="color: black;">
				<span class="mui-tab-label">运动</span>
			</a>
		</div>
		<div class="mui-row mui-col-xs-3 mui-text-center"style="padding-top: 3%;">
			<a href="/store"style="color: black;">
				<span class="mui-tab-label">商城</span>
			</a>
		</div>
	</div>
</nav>
</body>
<script type="text/javascript" charset="utf-8">
	mui.init();

</script>
</html>
